@()(implicit session: Session)
    @english.home.main("Mollusk") {
        <style>
                .fixed-table-body {
                    overflow-x: unset;
                    overflow-y: unset;
                }

        </style>
        <div id="content">
            <h1 class="title">Welcome</h1>
            <div class="line"></div>
            <div class="intro" style="padding-left: 20px;padding-right: 20px;text-indent: 2em;">Mollusca is the second-largest phylum of invertebrate animals after the
                Arthropoda. The members are known as molluscs or mollusks[a] (/ˈmɒləsk/). Around 85,000 extant species
                of molluscs are recognized. The number of fossil species is estimated between 60,000 and 100,000
                additional species. The proportion of undescribed species is very high. Many taxa remain poorly studied.
                616 species with mitochondrial genome information are provided.</div>


                <!-- Begin Slider -->
            <div id="slider">

                <div class="flexslider">
                    <ul class="slides">
                        <li><img class="img-home" src="/assets/images/home/IMG_4482.JPG" alt="" height="380px"/></li>
                        <li><img class="img-home" src="/assets/images/home/IMG_4485.JPG" alt="" height="380px"/></li>
                        <li><img class="img-home" src="/assets/images/home/IMG_4491.JPG" alt="" height="380px"/></li>
                        <li><img class="img-home" src="/assets/images/home/IMG_4496.JPG" alt="" height="380px"/></li>
                        <li><img class="img-home" src="/assets/images/home/IMG_4512.JPG" alt="" height="380px"/></li>
                        <li><img class="img-home" src="/assets/images/home/IMG_4519.JPG" alt="" height="380px"/></li>
                        <li><img class="img-home" src="/assets/images/home/IMG_4526.JPG" alt="" height="380px"/></li>

                    </ul>
                </div>

            </div>

            <div>
                <h2>Statistics</h2>
                <div class="line"></div>

                <div style="width: 25%;
                    margin-top: 35px;margin-left: 20px;
                    float: left">

                    <table class="table" id="table">
                        <thead>
                            <tr>
                                <th data-field="classes">Classes</th>
                                <th data-field="species">Species</th>
                            </tr>
                        </thead>
                    </table>

                </div>
                <div id="charts" style="width: 70%;
                    height: 400px;
                    margin-left: 20px;
                    float: left"></div>

            </div>


            <div style="margin-top: 425px">

                <h2>Tools</h2>
            </div>
            <div class="line"></div>






            <div style="margin-left: 20px">

                <div >
                    <h3><a href="/US/mollusk/tools/blastBefore" target="_blank">
                        <img src="/assets/images/fenxi.png" style="width: 30px" />Blast</a>
                        <span> : an algorithm for comparing primary biological sequence information</span>
                    </h3>

                </div>
                <div>
                    <h3><a href="/US/mollusk/tools/genewiseefore" target="_blank">
                        <img src="/assets/images/fenxi.png" style="width: 30px" />Genewise</a>
                        <span >
                            ：compares a protein sequence to a genomic DNA sequence </span></h3>
                </div>


                <div>
                    <h3><a href="/US/mollusk/tools/muscleBefore" target="_blank">
                        <img src="/assets/images/fenxi.png" style="width: 30px" />Muscle</a>
                        <span>
                            ：multiple alignment programs with higher accuracy and speed</span></h3>
                </div>


                <div>
                    <h3><a href="/US/mollusk/tools/lastzBefore" target="_blank">
                        <img src="/assets/images/fenxi.png" style="width: 30px" />Lastz</a>
                        <span>
                              ：a drop-in replacement for BLASTZ </span></h3>
                </div>

            </div>

            <h2 style="margin-top: 20px"> Global Visitors</h2>
            <div class="line"></div>


            <div style="width: 600px;
                margin-left: 20px;">
                <script type="text/javascript" src="//rf.revolvermaps.com/0/0/7.js?i=5fuhuf537c2&amp;m=0&amp;c=ff0000&amp;cr1=ff0000&amp;br=10&amp;sx=0" async="async"></script>
            </div>

        </div>


            <!-- End Content -->
        <div class="clear"></div>

        <script src="@routes.Assets.versioned("Highcharts-6.0.1/code/highcharts.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("Highcharts-6.0.1/code/highcharts-more.js")" type="text/javascript"></script>
    <script>


                $(function () {
                    $.post("@routes.HomeController.getClassesSpecies()", (data) => {
                        $("#table").bootstrapTable({data: data.table});
                        pie(data.pie);
                    })

                })

                function pie(data) {
                    new Highcharts.chart('charts', {
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            type: 'pie'
                        },
                        title: {
                            text: 'Species Statistics'
                        },
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.y}</b>'
                        },
                        credits: {
                            enabled: false
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.y} ',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    }
                                }
                            }
                        },
                        series: [{
                            name: 'Species',
                            colorByPoint: true,
                            data: data
                        }]
                    });
                }

        </script>
    }